<template>
    <div class="lightTable">
        <el-row :gutter="20">
            <el-col :span="10">
                <div class="timeReport">
                    <span>{{enumTab[activeName]}}超过</span>
                    <el-input-number v-model="num" controls-position="right" :min="0" size="mini" @change="changeTime"></el-input-number>
                    <span>分钟异常上报</span>
                </div>
                
                <!-- 异常上报 -->
                <tableLeft :activeName='activeName' :searchForm='searchForm' ref="tableLeft"></tableLeft>
            </el-col>
            <el-col :span="14">
                <span class="notifyPersonnel">{{enumTab[activeName]}}超过设定时间通知人员</span>

                <!-- 通知人员 -->
                <tableRight :activeName='activeName' :searchForm='searchForm' ref="tableRight"></tableRight>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import tableLeft from './tableLeft.vue'
    import tableRight from './tableRight.vue'
    import {
        getTimeoutReport,
        setTimeoutReport
    } from '@/api/exceptionController'
    export default {
        data() {
            return {
                num: undefined,
                enumTab:{
                    '0':'黄灯',
                    '1':'红灯'
                },
            }
        },
        components:{
            tableLeft,
            tableRight
        },
        props:{
            lightType:{
                type:String,
                default:'0'
            },
            activeName:{
                type:String,
                default:'0'
            },
            searchForm: {
                type: Object,
                default: () => ({})
            }
        },
        methods:{
            getList(searchForm){
                this.getTimeoutReport()
                this.$refs.tableLeft.getTypeList(searchForm)
                this.$refs.tableRight.getNoticeList(searchForm)
            },
            changeTime(e) {
                setTimeoutReport({
                    lampColor: this.lightType,
                    minute: this.num
                })
            },
            getTimeoutReport() {
                getTimeoutReport({
                    lampColor: this.lightType
                }).then(res => {
                    this.num = res.data ? parseInt(res.data) : 10
                })
            }
        }
    }
</script>

<style lang="less" scoped>
    .lightTable{
        @text-font-size:12px;
        .timeReport{
            font-size: @text-font-size;
            .el-input-number--mini{
                width: 100px;
                margin: 0 5px;
            }
        }

        .notifyPersonnel{
            display: inline-block;
            height: 28px;
            line-height: 28px;
            font-size: @text-font-size;
        }
    }
</style>